<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>张伟峰-jQuery-首页</title>
<link rel="stylesheet" type="text/css" href="css/base.css" >
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>

<body>
<div class="page1" >
	<h2><a href="javascript:;" id="resume">个人信息</a></h2>
	<table>
		<tbody>
			<tr><td>姓 名：</td><td>张伟峰</td></tr>
			<tr><td>性 别：</td><td>男</td></tr>
			<tr><td>生 日：</td><td>1989年12月</td></tr>
			<tr><td>邮 箱：</td><td>z82237483@126.com</td></tr>
		</tbody>
	</table>
</div>
<div class="page2" id="">
	<h2>前端实践</h2>
	<div class="marquee">
		<ul class="clearfix">
			<li>
				<a href="sports/more.html" target="_blank"><img src="img/01.png" /></a>
			</li>
			<li>
				<a href="sports/phone.html" target="_blank"><img src="img/02.png" /></a>
			</li>
			<li>
				<a href="sports/tab.html" target="_blank"><img src="img/03.png" /></a>
			</li>
			<li>
				<a href="sports/accordion.html" target="_blank"><img src="img/04.png" /></a>
			</li>
			<li>
				<a href="sports/wall.html" target="_blank"><img src="img/05.png" /></a>
			</li>
			<li>
				<a href="sports/sports.html" target="_blank"><img src="img/06.png" /></a>
			</li>
		</ul>
	</div>
	<div class="thumb" id="thumb">
		<ul class="clearfix">
			<li>
				<img src="img/6.png" />
				<a href="sports/sports.html" target="_blank">分块运动</a>
			</li>
			<li>
				<img src="img/5.png" />
				<a href="sports/wall.html" target="_blank">照片墙</a>
			</li>
			<li>
				<img src="img/4.png" />
				<a href="sports/accordion.html" target="_blank">手风琴</a>
			</li>
			<li>
				<img src="img/3.png" />
				<a href="sports/tab.html" target="_blank">选项卡</a>
			</li>
			<li>
				<img src="img/2.png" />
				<a href="sports/phone.html" target="_blank">手机菜单</a>
			</li>
			<li>
				<img src="img/1.png" />
				<a href="sports/more.html" target="_blank">小效果</a>
			</li>
		</ul>
	</div>
</div>
<div class="page3" >
	<h2>技术积累</h2>
	<div id="page3"></div>
</div>
<div class="page4" id="">
	<h2>HTML5</h2>
	<div class="play" id="play">
	    <ol>
	    	<li class="active">1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	        <li>5</li>
	        <li>6</li>
	    </ol>
		<ul>
			<li><a href="html5/slide.html" target="_blank"><img src="img/21.png" /></a></li>
			<li><a href="html5/grain.html" target="_blank"><img src="img/22.png" /></a></li>
			<li><a href="html5/flip.html" target="_blank"><img src="img/23.png" /></a></li>
			<li><a href="html5/blast.html" target="_blank"><img src="img/24.png" /></a></li>
			<li><a href="html5/xz.html" target="_blank"><img src="img/25.png" /></a></li>
			<li><a href="html5/game/index.html" target="_blank"><img src="img/26.png" /></a></li>
		</ul>
	</div>
	<div class="h5 clearfix">
		<div class="box">
	        <div class="front"><img src="img/11.png"></div>
	        <div class="back"><a href="html5/slide.html" target="_blank">一个简单的倒影切换图片，添加了自动切换，点击左右图片和按钮以及键盘的左右键来切换图片，单击当前图片变大。</a></div>
	    </div>
	    <div class="box">
	        <div class="front"><img src="img/12.png"></div>
	        <div class="back"><a href="html5/grain.html" target="_blank">一个3D的颗粒翻转，图片分块从背面翻转出来，单击图片切换下一张图片</a></div>
	    </div>
	    <div class="box">
	        <div class="front"><img src="img/13.png"></div>
	        <div class="back"><a href="html5/flip.html" target="_blank">单击图片，以翻书页的形式切换到下一张图片</a></div>
	    </div>
	    <div class="box">
	        <div class="front"><img src="img/16.png"></div>
	        <div class="back"><a href="html5/blast.html" target="_blank">单击图片，图片以碎片化的形式向前爆破，透明度逐渐变弱直到消失</a></div>
	    </div>
	    <div class="box">
	        <div class="front"><img src="img/14.png"></div>
	        <div class="back"><a href="html5/xz.html" target="_blank">3D图片的一个环状旋转图，拖动鼠标能够旋转图片</a></div>
	    </div>
	    <div class="box">
	        <div class="front"><img src="img/15.png"></div>
	        <div class="back"><a href="html5/game/index.html" target="_blank">一个简易版的捕鱼达人游戏，bug比较多，望见谅！</a></div>
	    </div>
	</div>
</div>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/base.js"></script>
<script src="js/index.js"></script>
</body>
</html>
